<template>
  <div class="continua">
    <div class="content">
      <!-- 1. 概念：一个函数，它允许你基于响应式依赖执行副作用。自动跟踪其回调函数内的响应式依赖，在依赖发生变化的时候触发回调函数；-->
      <!-- 2. 作用：执行副作用，在响应式依赖发生变化时执行一些自定义的操作，不需要明确指定依赖，会自动追踪使用的响应式的属性，并在相关依赖发生变化的时候重新运行副作用函数-->
      <!-- 3. 注意：watchEffect函数返回一个函数，调用该函数之后watchEffect失效；-->
      <h4>WatchEffect</h4>
      <el-button @click="onChangeCountClick">{{ count }}</el-button>
      <el-button @click="stopCountEffect">清除副作用函数</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref, watchEffect} from "vue";

const count = ref(1)
const onChangeCountClick = () => {
  count.value += 1
}
// 1- watchEffect是组合API
// 2- watchEffect是一个函数
// 3- watchEffect，接收一个回调函数，且该函数会被立即调用
// 当所依赖的数据发生改变会执行清除副作用函数。
// 当停止时执行。
// 当组件被销毁时执行。
// 不需要指定侦听的数据（不知道）
const stopCountEffect = watchEffect(() => {
  console.log("立即调用了");
  console.log(count.value); // 回调函数中所依赖的数据发生改变，会执行回调函数。
})
// watch和watchEffect的区别
/*
1. watch是监听的数据发生改变才会执行回调函数;watchEffect初次会立即执行,所依赖的发生改变也会立即执行
2. watchEffect无法获取到修改之前的值,watch可以
3. watchEffect有清理副作用的函数
*/
</script>

<style scoped lang="less">
.continua {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
}
</style>
